<template>
  <div class="p-6 bg-gray-100">
    <h1 class="mb-6 text-2xl font-bold text-gray-800">审核界面</h1>

    <div class="bg-white rounded-lg shadow-md">
      <div class="flex justify-between items-center p-4 border-b">
        <h2 class="text-xl font-semibold text-gray-700">待审核店铺</h2>
        <button
          @click="refreshList"
          class="p-2 text-gray-600 rounded-full hover:text-gray-900 hover:bg-gray-100"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-5 h-5"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
            />
          </svg>
        </button>
      </div>
      <div class="p-4">
        <p class="mb-2 text-sm text-gray-600">
          待审核项目数：{{ auditItems.length }}
        </p>
      </div>
      <div class="p-4">
        <ul class="space-y-4">
          <li
            v-for="item in auditItems"
            :key="item.id"
            class="flex justify-between items-center p-4 bg-gray-50 rounded-lg"
          >
            <div class="flex-1">
              <div class="flex items-center mb-3">
                <h3 class="mr-4 text-xl font-bold text-gray-800">
                  {{ item.shopName }}
                </h3>
                <div class="flex gap-2">
                  <span
                    v-for="tag in item.tagList"
                    :key="tag"
                    :style="getTagStyle()"
                    class="px-2 py-1 text-sm rounded-full"
                  >
                    {{ tag }}
                  </span>
                </div>
              </div>

              <div class="flex items-center mb-2 text-base text-gray-700">
                <p class="mr-6">
                  <span class="font-medium">发布人：</span>{{ item.username }}
                </p>
                <p>
                  <span class="font-medium">提交时间：</span
                  >{{ item.createTime }}
                </p>
              </div>

              <div class="flex items-center">
                <img
                  src="../../../assets/img/地点.png"
                  alt="地点图标"
                  class="mr-2 w-6 h-6 cursor-pointer"
                  @click="showMap(item)"
                />
                <span class="text-base text-gray-700">{{ item.location }}</span>
              </div>
            </div>

            <div class="flex items-center space-x-4">
              <div
                class="flex justify-center items-center w-24 h-24 bg-gray-200 rounded-lg cursor-pointer"
                @click="openImageModal(item.imageUrls)"
              >
                <img
                  :src="item.imageUrls[0]"
                  alt="店铺图片"
                  class="object-cover w-full h-full rounded-lg"
                />
              </div>
              <div class="space-x-2">
                <button
                  @click="approveItem(item.id)"
                  class="px-4 py-2 text-white bg-green-500 rounded hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-opacity-50"
                >
                  通过
                </button>
                <button
                  @click="rejectItem(item.id)"
                  class="px-4 py-2 text-white bg-red-500 rounded hover:bg-red-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-opacity-50"
                >
                  拒绝
                </button>
              </div>
            </div>
          </li>
        </ul>

        <!-- 使用分页组件 -->
        <Pagination
          v-model:currentPage="currentPage"
          :totalPages="totalPages"
          @page-change="handlePageChange"
        />
      </div>
    </div>

    <div
      v-if="isModalOpen"
      class="flex fixed inset-0 z-50 justify-center items-center bg-black bg-opacity-50"
      @click="closeModal"
    >
      <div class="relative max-w-4xl max-h-[90vh]" @click.stop>
        <button
          v-show="currentImageIndex > 0"
          @click="prevImage"
          class="absolute left-0 top-1/2 p-3 text-white rounded-full transition-all -translate-x-12 -translate-y-1/2 bg-black/50 hover:bg-black/75"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-6 h-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M15 19l-7-7 7-7"
            />
          </svg>
        </button>

        <img
          :src="currentImage"
          alt="预览图片"
          class="max-w-full max-h-[90vh] object-contain"
        />

        <button
          v-show="currentImageIndex < currentImageArray.length - 1"
          @click="nextImage"
          class="absolute right-0 top-1/2 p-3 text-white rounded-full transition-all translate-x-12 -translate-y-1/2 bg-black/50 hover:bg-black/75"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            class="w-6 h-6"
            fill="none"
            viewBox="0 0 24 24"
            stroke="currentColor"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M9 5l7 7-7 7"
            />
          </svg>
        </button>

        <div
          class="absolute bottom-4 left-1/2 px-4 py-2 text-sm text-white rounded-full -translate-x-1/2 bg-black/50"
        >
          {{ currentImageIndex + 1 }} / {{ currentImageArray.length }}
        </div>
      </div>
    </div>

    <!-- 地图模态框 -->
    <MapModal
      v-model:visible="mapVisible"
      :longitude="selectedLocation.longitude"
      :latitude="selectedLocation.latitude"
      :address="selectedLocation.address"
    />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch } from "vue";
import Pagination from "@/components/Pagination.vue";
import MapModal from "@/components/MapModal.vue";
import dishes from "@/api/dishes/dishes";

// 标签颜色和字体颜色映射
const tagStyles = [
  { backgroundColor: "#FEE2E2", color: "#E2659C" }, // 浅红色背景
  { backgroundColor: "#DCFCE7", color: "#4BA457" }, // 浅绿色背景
  { backgroundColor: "#DBEAFE", color: "#3A69EB" }, // 浅蓝色背景
  { backgroundColor: "#F3E8FF", color: "rgb(147, 51, 234)" }, // 浅紫色背景
  { backgroundColor: "#E2E3E5", color: "#000000" }, // 灰色背景
];

// 获取标签样式
const getTagStyle = () => {
  return (
    tagStyles[Math.floor(Math.random() * tagStyles.length)] || {
      backgroundColor: "#FFFFFF",
      color: "#000000",
    }
  ); // 默认样式
};

const currentPage = ref(1);
const pageSize = ref(5); // 设置每页显示5条
const total = ref(28); // 总数据量
const totalPages = ref(Math.ceil(total.value / pageSize.value));
// 定义接口 model
interface Model {
  id: string;
  latitude: string; // 修正拼写错误
  location: string;
  longitude: string; // 修正拼写错误
  shopName: string; // 修正拼写错误
  tagList: string[]; // 指定 tagList 的类型为字符串数组
  username: string; // 修正拼写错误
  createTime: string;
  imageUrls: string[];
}

// 创建响应式变量 auditItems
const auditItems = ref<Model[]>([]);

// 获取列表数据
const fetchData = async (page: number) => {
  try {
    // 模拟API请求延迟
    // await new Promise((resolve) => setTimeout(resolve, 500));

    // 计算起始索引
    console.log("进入");

    const start = (page - 1) * pageSize.value;

    // 模拟数据获取
    // auditItems.value = generateMockData(start, pageSize.value);
    let r_data = {
      page: start,
    };
    auditItems.value = (await dishes.getNotExamineShop(r_data)).data.list;

    // 更新当前页
    currentPage.value = page;

    console.log(`获取第 ${page} 页数据`);
  } catch (error) {
    console.error("获取数据失败:", error);
  }
};

// 切换页面
const changePage = (page: number) => {
  if (page < 1 || page > totalPages.value) return;
  fetchData(page);
};

watch(currentPage, (newPage) => {
  if (newPage < 1 || newPage > totalPages.value) return;
  fetchData(newPage);
});

// 刷新列表
const refreshList = () => {
  fetchData(currentPage.value);
};

// 组件挂载时获取数据
onMounted(() => {
  fetchData(1);
});

const isModalOpen = ref(false);
const currentImage = ref("");
const currentImageIndex = ref(0);
const currentImageArray = ref<string[]>([]);

const openImageModal = (imageUrl: string | string[]) => {
  if (Array.isArray(imageUrl)) {
    currentImageArray.value = imageUrl;
    currentImageIndex.value = 0;
    currentImage.value = imageUrl[0];
  } else {
    currentImageArray.value = [imageUrl];
    currentImageIndex.value = 0;
    currentImage.value = imageUrl;
  }
  isModalOpen.value = true;
};

const closeModal = () => {
  isModalOpen.value = false;
};

const nextImage = () => {
  if (currentImageIndex.value < currentImageArray.value.length - 1) {
    currentImageIndex.value++;
    currentImage.value = currentImageArray.value[currentImageIndex.value];
  }
};

const prevImage = () => {
  if (currentImageIndex.value > 0) {
    currentImageIndex.value--;
    currentImage.value = currentImageArray.value[currentImageIndex.value];
  }
};

const approveItem = (id: string) => {
  console.log(`通过审核项目 ${id}`);
  dishes.updateShopStatus({
    id: id,
    status: 1,
  });
  fetchData(1);
};

const rejectItem = (id: string) => {
  console.log(`拒绝审核项目 ${id}`);
  dishes.updateShopStatus({
    id: id,
    status: -1,
  });
  fetchData(1);
};

// 监听页码变化
const handlePageChange = (page: number) => {
  console.log("sdfs");

  currentPage.value = page;
  fetchData(page);
};

const mapVisible = ref(false);
const selectedLocation = ref({
  longitude: 0,
  latitude: 0,
  address: "",
});

const showMap = (item: any) => {
  selectedLocation.value = {
    longitude: item.longitude,
    latitude: item.latitude,
    address: item.location,
  };
  mapVisible.value = true;
};
</script>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

button:hover svg {
  transform: scale(1.1);
}

button svg {
  transition: transform 0.2s ease;
}
</style>
